<template>
  <div class="home">
    <!-- 组件4 MyPicture 图片 -->
    <MyPicture />
    <!-- 组件3 MyView 可视化 -->
    <MyView />
    <!-- 组件1 MyTable 表格 -->
    <MyTable :arr="arr"/>
    <!-- 组件2 MyPage 分页 -->
<!-- 16.2 -->
    <MyPage @changePage="changePage" @changepageSize="changepageSize" :page="page" :pageSize="pageSize" :total="total" :pageSizes="pageSizes"/>

    <!-- 16.3 再放入子页面改名 -->
  </div>
</template>

<script>
import MyPicture from './MyPicture.vue'
import MyView from './MyView.vue'
import MyPage from "./MyPage.vue";
import MyTable from "./MyTable.vue";
import { getSituationApi } from "../../api/situationApi";

export default {
  components: {
    MyPicture,
    MyView,
    MyPage,
    MyTable
  },
  data() {
    return {
      arr: [],//1.建一个数组保存表格中的数据 
      page:1,       //当前页面
      pageSize:10,  //每一页多少条数据                   //16.把这四个数据传入子组件
      total:0,
      pageSizes:[10, 20, 30, 40]
    };
  },
  // 2.请求数据 再把数据赋给数组
  // 3.先挂载
  mounted() {
    this.initGetSituation();
  },
  // // 4.发送请求
  methods: {
    changePage(val){
      this.page=val
      this.initGetSituation()
    },
    changepageSize(val){
      // 控制pageSize切换
      this.pageSize=val
      this.initGetSituation()
    },
    initGetSituation() {
      // 5.写api
      // 6.发送ajax请求资源
      getSituationApi({page:this.page,pageSize:this.pageSize}).then(res => {       //14.写分页请求传数据  15.再去后台situetiondata接收
        console.log('res', res);
        // 9.把数据写入数组
        if(res.code==200){
          this.arr=res.data
          // 10.绑定到页面
          // 11.再子组件接收
          this.total=res.total
        }
      });
    }
  }
};
// 7.用mockjs伪造接口
// 8.伪造数据 

// 12.分页
// 13.在当前页面date中添加两个关于分页的变量page,pageSize

// 17.在子组件mypage中把数据传过来,父组件写方法接收

// 18.可视化 子组件
</script>
<style scoped>
 .home{
   background-color: white;
   border-radius: 9px;
   box-shadow:1px 1px 6px 0px#666 ;
 }
</style>